<template>
  <div class="home">
    <p class="tipx">组件版</p>
    <el-button type="primary" size="default" @click="hanlePreview">预览</el-button>

    <PageEditor v-model:value="val" />

    <button @click="isText = !isText" style="margin: 10px">html切换</button>
    <div v-if="isText">{{ val }}</div>
    <div v-else v-html="val"></div>

    <el-dialog v-model="dialogVisible" title="预览" width="1000" :before-close="handleClose">
      <div v-html="val"></div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import PageEditor from '@/components/PageEditor/index.vue'
const val = ref('Welcome to Your Vue.js App')
const isText = ref(true)
const dialogVisible = ref(false)
const hanlePreview = () => {
  dialogVisible.value = true
}
const handleClose = () => {
  dialogVisible.value = false
}
</script>
